<template>
  <div class="right-nav">
    <component
      :is="activeItem.component"
      :upload-callback="uploadCallback"
      :title="activeItem.title"
      v-bind="activeItem.attrs"
    ></component>
    <div class="side-nav">
      <div
        v-for="(item, index) in navOptions"
        :key="index"
        class="side-btn"
        :class="{ active: activeItem.title === item.title }"
        @click="activeItem = item"
      >
        <i :class="`iconfont ${item.icon}`" />
        <div>{{ item.title }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { navOptions } from "./config";
export default {
  name: "RightNav",
  props: {
    uploadCallback: {
      type: Function,
      default: new Function(),
    },
  },
  data() {
    return {
      activeItem: navOptions[0],
      navOptions,
    };
  },
  methods: {
    upload() {
      console.log("upload");
    },
  },
};
</script>

<style lang="less" scoped>
.dark-theme .right-nav {
  .side-nav {
    border-left: 1px solid #fff;
  }
}

.right-nav {
  width: 610px;
  flex-shrink: 0;
  display: flex;
  /deep/.side-nav-content {
    width: 510px;
    padding: 0 20px 0 10px;
    flex-shrink: 0;
    background-color: var(--translate-left-background);
  }
  .side-nav {
    width: 60px;
    flex-shrink: 0;
    padding: 3px;
    background-color: var(--translate-left-background);
    border-left: 1px solid var(--color-primary);
    .side-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 54px;
      height: 51px;
      font-size: 10px;
      color: #999;
      cursor: pointer;
      &.active,
      &:hover {
        color: var(--color-primary-text);
        border-radius: 4px;
        background: #f2f3f7;
      }
      .iconfont {
        margin-bottom: 10px;
      }
    }
    .side-btn + .side-btn {
      margin-top: 10px;
    }
  }
}
</style>
